var vm = new Vue({
    el: "#app",
    components: {
        'BootstrapTable': BootstrapTable
    },
    data: {
        online_host_list: [],
        hostId: '10084',
        name: 'CPU utilization',
        columns: [
            {
                title: '时间',
                field: 'clock'
            },
            {
                title: '利用率',
                field: 'value'
            }
        ],
        data: [

        ],
        options: {
            pagination: true,
            pageSize: 7,
            pageList: [5,10,20]
        }
    },
    methods: {
        getUtilizationByName: function() {
            let _this = this;
            axios({
                method: 'post',
                url: '/ZabbixPlatform/demo/get_utilization_by_name.action',
                data: {"hostId": _this.hostId, "name": _this.name}
            }).then(function (response){
                let resultList = response.data.content.result
                _this.$refs.table.load(resultList)
                let clock_list = resultList.map(item => item.clock)
                let value_list = resultList.map(item => item.value)
                _this.updateChart(clock_list, value_list)
            }).catch(function (error){
                console.log(error)
            })
        },
        updateChart: function (clock_list, value_list) {
            let myChart = echarts.init(document.getElementById('main'));

            let option = {
                title: {
                    text: '利用率'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: clock_list,
                    axisLabel:{
                        interval:0,
                        rotate:90
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: value_list,
                    type: 'line',
                    areaStyle: {}
                }]
            };

            myChart.setOption(option);
        }
    },
    created: function (){
        let _this = this;
        axios({
            method: 'get',
            url: '/ZabbixPlatform/demo/get_all_online_host.action'
        }).then(function (response){
            let resultList = response.data.content.result
            _this.online_host_list = resultList
            console.log(resultList)
        }).catch(function (error){
            console.log(error)
        })
    }
})